<template>
  <div>
    <!-- 需求：实现一个自定义指令v-clickoutside 当点击元素外面的时候要能够让元素隐藏 -->
    <div class="main" v-clickoutside="handleClose" v-if="show">
      <button @click="isShow = !isShow">点击显示下拉框</button>
      <div v-show="isShow">
        <p>111</p>
        <p>222</p>
        <p>333</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      show: true
    };
  },
  methods: {
    handleClose: function () {
      this.isShow = false;
    },
  },
  directives: {
    clickoutside: {
      // 1. 现在页面只有button有点击事件，其他地方没有点击事件，所以还需要绑定一个点击事件，click绑定给谁
      // 2. 自定义指令中需要有判断逻辑，只要判断点击了main盒子外面，就要执行handleClose函数。
      bind: function (el, binding) {
        // console.log(el, binding);

        function handler(e) {
          // el是绑定的灰色盒子， e.target表示的是触发click事件的元素
          // 如果el包含了e.target 就说明点击的是里面，那么此时什么都不需要做，直接return就行了
          // console.log(el, e.target);
          if(el.contains(e.target)) return false
          
          // 如果点击外面，就直接执行函数 handleClose
          binding.value()
        }
        // 把handler函数绑定到el身上，这样的话下面的unbind函数中，在移除事件时，也能够通过el获取到事件函数
        el._handler = handler

        document.addEventListener("click", el._handler);
      },
      unbind: function (el) {
        console.log('解绑了');
        document.removeEventListener("click", el._handler);
      },
    },
  },
};
</script>
<style>
.main {
  background-color: gray;
  width: 480px;
}
</style>